<template>
    <div>
        <div>
            <el-form :model="form" label-width="100px" class="demo-form-inline" :inline="true">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="所属机构">
                    <el-select v-model="form.agencyId" filterable placeholder="请选择">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in coreOrgList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryFleet">查询</el-button>
                    <el-button type="primary" @click="addDialogVisible = true; addForm = {}">添加</el-button>

                </el-form-item>
            </el-form>

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号">
                </el-table-column>
                <el-table-column prop="name" label="车队名称">
                </el-table-column>
                <el-table-column prop="fleetNumber" label="车队编号">
                </el-table-column>
                <el-table-column label="所属机构">
                    <template v-slot="transportLine">
                        <span v-for="itme in coreOrgList" :key="itme.id" v-if="transportLine.row.agencyId == itme.id">
                            {{ itme.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" prop="manager">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template v-slot="status">
                        {{ status.row.status == 0 ? "禁用" : "正常" }}
                    </template>
                </el-table-column>

                <el-table-column prop="on" label="操作" width="180">
                    <template v-slot="Student">
                        <el-button type="warning" @click="showUpdateFleet(Student.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteFleet(Student.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[2, 4, 6, 8]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div>
                <el-dialog title="添加车队" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
                    <div>
                        <el-form ref="form" :model="addForm" label-width="80px">
                            <el-form-item label="车队名称">
                                <el-input v-model="addForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="所属机构">
                                <el-select v-model="addForm.agencyId" filterable placeholder="请选择">
                                    <el-option v-for="item in coreOrgList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="车次编号">
                                <el-input v-model="addForm.fleetNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input v-model="addForm.manager"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addFleet">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <div>
                <el-dialog title="修改车队" :visible.sync="updateDialogVisible" width="30%" :before-close="handleClose">
                    <div>
                        <el-form ref="form" :model="updateForm" label-width="80px">
                            <el-form-item label="车队名称">
                                <el-input v-model="updateForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="所属机构">
                                <el-select v-model="updateForm.agencyId" filterable placeholder="请选择">
                                    <el-option v-for="item in coreOrgList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="车次编号">
                                <el-input v-model="updateForm.fleetNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input v-model="updateForm.manager"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="updateDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateFleet">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {

    data() {
        return {
            form: {},//查询条件
            tableData: [],//表格数据
            currentPage: 1,//页面下标
            total: 0,//总页数
            pageSize: 2,//页面大小 
            coreOrgList: [],//机构信息
            addDialogVisible: false,// 添加对话框
            updateDialogVisible: false,// 添加对话框
            addForm: {},//添加数据
            updateForm: {},//修改数据
        }

    },
    created() {
        this.queryCoreOrgListAll();
        this.queryFleet()
    },
    methods: {
        //删除车队
        async deleteFleet(row) {
            let result = await axios.post("/api/pd-basecjj/pd-fleet/deleteFleet", row);
            if (result.data.code == "200") {
                this.$message("删除成功");
                this.queryFleet();
            }
        },
        //展示修改
        showUpdateFleet(row) {
            this.updateForm = JSON.parse(JSON.stringify(row));
            this.updateDialogVisible = true;
        },
        //修改车队
        async updateFleet() {
            let result = await axios.post("/api/pd-basecjj/pd-fleet/updateFleet", this.updateForm);
            if (result.data.code == "200") {
                this.$message("修改成功");
                this.updateDialogVisible = false;
                this.queryFleet();
            }
        },


        //添加车队
        async addFleet() {
            let result = await axios.post("/api/pd-basecjj/pd-fleet/addFleet", this.addForm);
            if (result.data.code == "200") {
                this.$message("添加成功");
                this.queryFleet();
                this.addDialogVisible = false;
            }
        },
        //查询所有机构
        async queryCoreOrgListAll() {
            let result = await axios.post("/api/pd-aggregationcjj/pd-core-org/queryCoreOrgListAll");
            this.coreOrgList = result.data.data;

        },
        /**
         * 条件分页查询
         */
        async queryFleet() {
            let result = await axios.post("/api/pd-aggregationcjj/pd-fleet/queryFleet", { currentPage: this.currentPage, pageSize: this.pageSize, condition: this.form });
            console.log(result.data);
            this.total = result.data.data.total;
            this.tableData = result.data.data.list;
        },
        // 选中页面大小
        handleSizeChange(val) {
            this.pageSize = val;
            this.queryFleet();
        },
        //选择第几页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryFleet();
        },
        // 关闭对话框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }

}
</script>

<style scoped></style>